<template>
  <el-dialog title="添加服务器地址" :append-to-body="true" :close-on-click-modal="false" :visible.sync="baseUrlFromVisible" width="440px">
    <el-form ref="form" :model="baseUrlForm" :rules="baseUrlRule" label-width="0">
      <el-row>
        <el-col :span="24">
          <el-form-item prop="baseUrl">
            <el-input v-model="baseUrlForm.baseUrl" placeholder="请输入地址"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item prop="baseTitle">
            <el-input v-model="baseUrlForm.baseTitle" placeholder="请输入备注"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handelSubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: "editBaseUrlModal",
  data()
  {
    return {
      baseUrlIndex: null,
      baseUrlList: [
        {
          label: "系统默认",
          value: window.HC_config.VUE_APP_BASE_API || process.env.VUE_APP_BASE_API,
        }
      ],
      //表单数据
      baseUrlForm: {},
      //表单规则
      baseUrlRule: {
        baseUrl: [
          { required: true, message: '请输入地址', trigger: 'blur' },
          { pattern: /(http|https):\/\/\S*/, message: '地址格式不正确,http://或https://开头', trigger: 'blur' },
        ],
      },
      //是否显示修改服务器地址弹窗
      baseUrlFromVisible: false,
    }
  },
  methods: {
    //确定
    handelSubmit()
    {
      this.$refs["form"].validate(valid =>
      {
        if (valid)
        {
          let tampStr = localStorage.getItem("BASE_URL_LIST");
          if (tampStr)
          {
            try
            {
              this.baseUrlList = JSON.parse(tampStr);
            }
            catch (err)
            {
            }
          }
          if (this.baseUrlIndex != null && this.baseUrlIndex != undefined)
          {
            this.baseUrlList[this.baseUrlIndex] = {
              value: this.baseUrlForm.baseUrl,
              label: this.baseUrlForm.baseTitle || this.baseUrlForm.baseUrl
            }
          }
          else
          {
            this.baseUrlList.push({
              value: this.baseUrlForm.baseUrl,
              label: this.baseUrlForm.baseTitle || this.baseUrlForm.baseUrl
            })
          }

          localStorage.setItem("BASE_URL_LIST", JSON.stringify(this.baseUrlList));
          this.baseUrlFromVisible = false;
          this.$emit("onSave");
          //切换到刚修改的地址
          localStorage.setItem("local_server_ip", this.baseUrlForm.baseUrl);
          location.reload();
        }
      })
    },
    //显示
    show(P_FormDate, P_UrlIndex)
    {
      this.reset();
      this.baseUrlIndex = P_UrlIndex;
      if (P_FormDate)
      {
        this.baseUrlForm.baseUrl = P_FormDate.value;
        this.baseUrlForm.baseTitle = P_FormDate.label;
      }
      this.baseUrlFromVisible = true;
    },
    // 表单重置
    reset()
    {
      this.baseUrlForm = {
        baseUrl: "",
        baseTitle: ""
      };
      this.resetForm("form");
    },
    // 取消按钮
    handleClose()
    {
      this.baseUrlFromVisible = false;
      this.reset();
    },
  }
}
</script>
